// npm i @vueuse/core
// https://vueuse.org/core/useintersectionobserver/#usage
import { useIntersectionObserver } from "@vueuse/core";
let imgresize = {
  mounted(el, binding) {
    // console.log(el, binding.value);
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }], observerElement) => {
        // console.log(isIntersecting); // 是否进入可视区域
        if (isIntersecting) {
          //   console.dir(el); // 图片元素
          if (binding.value.indexOf("yosm-file.aushanviviin.com") != -1) {
            // console.log(el.getBoundingClientRect().width); // 获取图片宽度
            let resizewidth = el.getBoundingClientRect().width
              ? "/resize,w_" + el.getBoundingClientRect().width.toFixed(0)
              : "";
            let houzui = `?x-oss-process=image${resizewidth}/quality,q_80`;
            el.src = binding.value + houzui;
            el.onerror = function () {
              el.src = binding.value;
            };
          } else {
            el.src = binding.value;
          }
          stop();// 不再监听图片是否进入可视区域
        }
      }
    );
  },
};
export const LzayImg = {// 定义导出插件插件
  install(app) {
    // console.log(app);
    app.directive("img-resize", imgresize);// 注册一个全局指令
  },
};
